<template>
	<comRoot @execAfterToken="loadDataGetFun">
		<template #page>
			<view class="shipping-record-page relative">
				<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/page-bg.png`" class="bg" />
				<comDetailNavigateBack title="发货记录" />
				<comScrollTab v-model="cuurentIndex" :list="tabAreaList">
					<view class="tip-box flex flex-align-items-center relative" v-if="userInfo.show_recovery">
						<image src="/static/images/public_imgs/important-note.png" class="shop-tip-icon" mode=""></image>
						<text>商品发货完成后,超过七天将自动确认收货。</text>
					</view>
					
					<scroll-view scroll-y class="scroll-y" @scrolltolower="scrolltolower" :style="{ height: 'calc(100vh - ' + commonNavHeight + ' - 88rpx)' }">
						<view v-if="resLists && resLists.length">
							<comRecord :list="resLists" @reload="setReloadFun"/>
							<view style="padding-bottom: 26rpx;">
								<comLoadMore class="loadmore-txt" :loading="loading" :showLoadendTxt="showLoadendTxt"></comLoadMore>
							</view>
						</view>
						<comEmptyData v-else-if="resLists && !resLists.length && !loading"></comEmptyData>
						<comLoading style="width: 100%; height: 100%" v-if="loading"></comLoading>
					</scroll-view>
				</comScrollTab>
				<!-- 小程序隐私保护指引设置 -->
				<!-- #ifdef MP-WEIXIN -->
				<comPrivacyPopup senceOrign="sceneNull" style="z-index: 100000" title="用户隐私保护提示" popupOfHeight="482rpx"></comPrivacyPopup>
				<!-- #endif -->
			</view>
		</template>
	</comRoot>
</template>

<script>
	import { getShopProductSendOrderListApi } from '@/setupproject/INTERFACE.js';
	import store from '@/store';
	import pager from '@/inmixed/paging.mixin.js';
	import { setAsyncFunWait, setAuthPhoneUsers } from '@/setupproject/TOOLS_FUN';
	export default {
		name: 'deliveryManagementPage',
		mixins: [pager],
		data() {
			return {
				cuurentIndex: 0,
				isLoadEnd: false,
				loading: true,
				tabAreaList: [{ text: '全部' }, { text: '待发货' }, { text: '已发货' }, { text: '已完成' }],
			};
		},
		computed: {
			showLoadendTxt() {
				return this.isShowPageLoadedTxt && !this.loading && this.resLists.length ? true : false;
			},
			token() {
				return store.getters.token;
			},
			userInfo() {
				return this.$store.getters.userInfo;
			},
			commonNavHeight() {
				return store.getters.commonNavHeight + 'px';
			},
			commonConfigs() {
				return store.getters.commonConfigs || {};
			},
		},

		async onLoad(option) {
			this.cuurentIndex = Number(option.index);
			if(option.index) {
				this.isLoadEnd = true;
			}
			
			if(!this.token) {
				await (uni.setStorageSync('isFromShopRecord', true))
				await setAuthPhoneUsers(true, true)
			}
		},
		watch: {
			cuurentIndex(v) {
				this.resLists = [];
				/* paging.mixin.js Methods */
				this.pagingInitFun();
				this.resListsGetFun();
			}
		},
		methods: {
			async listsGetFun() {
				this.loading = true;
				const { data, code } = await getShopProductSendOrderListApi({ send_status: this.cuurentIndex, page: this.pageInfoObj.page, page_size: this.pageInfoObj.page_sizes });
				setTimeout(() => {
					this.loading = false;
				}, 0);
				data.resLists = data.send_list;
				return data;
			},
			
			async loadDataGetFun(options = {}) {
				if(this.isLoadEnd) return;
				if(!this.token) {
					await (uni.setStorageSync('isFromShopRecord', true))
					await setAuthPhoneUsers(true, true)
					return;
				}
				
				await setAsyncFunWait(200);

				await this.pagingInitFun();
				await this.resListsGetFun();
			},
			
			setReloadFun() {
				this.resLists = [];
				/* paging.mixin.js Methods */
				this.pagingInitFun();
				this.resListsGetFun();
			},
			
		}
	};
</script>

<style lang="scss" scoped>
	.shipping-record-page {
		width: 100%;
		height: 100%;
		.tip-box{
			top: -8rpx;
			font-size: 22rpx;
			margin-bottom: 12rpx;
			padding-left: 26rpx;
			color: #63FFF7;
			.shop-tip-icon{
				margin-right: 12rpx;
				width: 22rpx;
				height: 22rpx;
			}
		}
	}
</style>
